<template>
    <div id="map_box">
        地图开发
    </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue'

import { ref, reactive } from 'vue';
// addressArr 为后端返回的坐标数据
const addressArr = ref([
    {
        longitude: 116.304, latitude: 39
    },
    {
        longitude: 117.304, latitude: 39.5
    },
    {
        longitude: 116.504, latitude: 38.345
    },
    {
        longitude: 115.84, latitude: 38.12
    },
    {
        longitude: 116.804, latitude: 39.5
    }

])
onMounted(() => {
    // 01: 创建地图实例
    var map = new BMapGL.Map("map_box");
    // 02: 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    // 设置循环, 创建多个点标记
    addressArr.value.forEach(item => {
        // 03: 设置地图的中心点坐标
        var point = new BMapGL.Point(item.longitude, item.latitude);
        // 04: 初始化地图  15 表示地图的缩放级别
        map.centerAndZoom(point, 10);
        // 05: 创建点标记
        var marker = new BMapGL.Marker(point);
        // 06: 在地图上应用marker
        map.addOverlay(marker);
        // 创建地理编码实例      
        var myGeo = new BMapGL.Geocoder();
        // 创建信息窗口
        var opts = {
            width: 200,
            height: 100,
            title: '当前位置:'
        };
        // 根据坐标得到地址描述    
        myGeo.getLocation(new BMapGL.Point(item.longitude, item.latitude), function (result) {
            if (result) {
                // console.log('当前位置为', result.address);
                (result.address);

                var infoWindow = new BMapGL.InfoWindow(result.address, opts);
                // 点标记添加点击事件
                marker.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow, point); // 开启信息窗口
                });
            }
        });
    })
})

</script>
<style scoped lang="scss">
#map_box {
    width: 100%;
    height: 100%
}
</style>